<template>
  <div>
    <el-button class="w-100" :size="size" plain @click="toSelect">
      {{ value == null || value.carNo === '' ? buttonName : value.carNo }} <i class="el-icon-edit"></i>
    </el-button>
    <el-dialog :title="buttonName" append-to-body :visible.sync="showFlag" width="1000px">
      <div class="flex-start m-b-10">
        <el-input size="small" class="m-r-10" style="width: 300px;" v-model="search.carNo" placeholder="输入车牌号"/>
        <el-button size="small" type="primary" icon="el-icon-search" :loading="loading" @click="query">查询</el-button>
      </div>
      <el-table class="my-table" :data="data" v-loading="loading" style="width: 100%" border height="350"
                :header-cell-style="{background:'#eee',color:'#000'}">
        <el-table-column label="" width="40">
          <template v-slot="scope">
            <el-radio :label="scope.row.id" v-model="carSelect" class="m-l-5">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column prop="carNo" label="车牌号" min-width="100"/>
        <el-table-column prop="userName" label="司机姓名" min-width="100"/>
        <el-table-column prop="userPhone" label="联系电话" min-width="100"/>
        <el-table-column prop="cardNo" label="电子卡号" min-width="100"/>
      </el-table>
      <app-pagination ref="paginationRef" :total="total" :page-size="page.size" class="m-t-20" @change="pageChange"/>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button type="primary" plain size="small" @click="showFlag=false">取消</el-button>
        <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {equals, getRecords, getTotal, isNotNull, isNull, msgError} from "@/util/common-util";
import {getPage} from "@/api/business/filling-team-car";

export default {
  name: "select-filling-car-button",
  components: {AppPagination},
  props: {
    buttonName: {
      type: String,
      default: '选择车牌号码'
    },
    initValue: {
      type: Object,
      default: null
    },
    teamId: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      showFlag: false,
      data: [],
      loading: false,
      search: {
        // teamId: '',
        carNo: ''
      },
      page: {
        size: 10,
        current: 1
      },
      total: 0,
      value: null,
      carSelect: null
    }
  },
  created() {
    if (isNotNull(this.initValue)) {
      this.value = this.initValue
    }
    this.search.teamId = this.teamId
  },
  methods: {
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    query() {
      this.loading = true
      getPage(this.page, this.search).then(res => {
        this.data = getRecords(res)
        if (isNotNull(this.value)) {
          for (const item of this.data) {
            if (item.id == this.value.carId) {
              this.carSelect = item.id
              break
            }
          }
        }
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    toSelect() {
      this.showFlag = true
      this.query()
    },
    confirmAdd() {
      if (isNull(this.carSelect)) return msgError("请选择一个补液车")
      let flag = true
      for (const item of this.data) {
        if (equals(item.id, this.carSelect)) {
          this.value = {
            carId: item.id,
            carNo: item.carNo
          }
          this.$emit("change", this.value)
          flag = false
          this.showFlag = false
          break
        }
      }
      if (flag) msgError("请选择一个补液车")
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }
}
</style>
